/**
 * AssistantTabBar - Top-level Assistant Tab Navigation
 * 
 * Features:
 * - Display active assistants as tabs
 * - Switch between assistants
 * - Show session count per assistant
 * - Pin/unpin assistants
 * - Drag to reorder
 */

import { useState } from 'react';
import { Bot, Star } from 'lucide-react';
import { Tab } from './Tab';
import { TabList } from './TabList';
import type { Assistant } from '@/components/assistants/AssistantCard';

export interface AssistantTabBarProps {
  assistants: Assistant[];
  activeId: string | null;
  sessionCounts: Record<string, number>;
  onSelect: (id: string | null) => void;
  onAdd?: () => void;
  maxTabs?: number;
}

export function AssistantTabBar({
  assistants,
  activeId,
  sessionCounts,
  onSelect,
  onAdd,
  maxTabs = 10,
}: AssistantTabBarProps) {
  const [draggedId, setDraggedId] = useState<string | null>(null);

  // Include default assistant
  const allAssistants = [
    {
      id: 'default',
      name: '通用助手',
      description: '默认助手',
      category: undefined,
      isBuiltin: true,
    },
    ...assistants,
  ];

  // Show only pinned or recently used assistants
  const visibleAssistants = allAssistants.filter(a => {
    const sessionCount = sessionCounts[a.id] || 0;
    return a.isFavorite || sessionCount > 0 || a.id === activeId;
  }).slice(0, maxTabs);

  const handleDragStart = (id: string) => (e: React.DragEvent) => {
    setDraggedId(id);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', id);
  };

  const handleDragEnd = () => {
    setDraggedId(null);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  };

  const handleDrop = (targetId: string) => (e: React.DragEvent) => {
    e.preventDefault();
    const sourceId = e.dataTransfer.getData('text/plain');
    
    if (sourceId !== targetId) {
      // TODO: Implement reorder logic in store
      console.log(`Reorder ${sourceId} to ${targetId}`);
    }
    
    setDraggedId(null);
  };

  return (
    <div className="border-b bg-background">
      <TabList
        onAdd={onAdd}
        showAddButton={false}
        maxTabs={maxTabs}
      >
        {visibleAssistants.map((assistant) => {
          const sessionCount = sessionCounts[assistant.id] || 0;
          const isActive = activeId === assistant.id || (activeId === null && assistant.id === 'default');
          
          return (
            <Tab
              key={assistant.id}
              id={assistant.id}
              label={assistant.name}
              icon={
                assistant.isFavorite ? (
                  <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
                ) : (
                  <Bot className="w-4 h-4" />
                )
              }
              active={isActive}
              closable={false} // Assistants are not closable in tab bar
              unreadCount={sessionCount > 0 ? sessionCount : undefined}
              pinned={assistant.isFavorite}
              onClick={() => onSelect(assistant.id === 'default' ? null : assistant.id)}
              draggable
              onDragStart={handleDragStart(assistant.id)}
              onDragEnd={handleDragEnd}
              onDragOver={handleDragOver}
              onDrop={handleDrop(assistant.id)}
              className={cn(
                'assistant-tab',
                draggedId === assistant.id && 'opacity-50 scale-95'
              )}
            />
          );
        })}
      </TabList>
    </div>
  );
}

function cn(...classes: (string | boolean | undefined)[]) {
  return classes.filter(Boolean).join(' ');
}

